Configure Auth0 for Identity

The Moesif Developer Portal requires an Identity Provider to secure the front-end application and control access. Below are the steps required to set up Auth0 as an identity provider to work with the Moesif Developer Portal.

Creating an Application within Auth0

To configure Auth0 for use with the Moesif Developer Portal, you need to create an Auth0 Application. Follow these steps:

  1. Log into Auth0:
    • From the left-side menu, click on Applications and then select Applications.
  2. Create a New Application:
    • On the Applications page, click the Create Application button.
    • In the modal that appears:
      • Fill in the Name field with a value such as Developer Portal.
      • Select Single Page Application as the Application Type.
      • Click Create.
  3. Configure Application Settings:
    • On the next page, go to the Settings tab.
    • Scroll down to the Application URIs section.
    • Add https://127.0.0.1:4000 (or the URL where your developer portal will be hosted) as an entry for:
      • Application Login URI
    • Add http://127.0.0.1:4000 (or the URL where your developer portal will be hosted) as an entry for:
      • Allowed Callback URLs
      • Allowed Logout URLs
      • Allowed Web Origins
  4. Save Changes:
    • Scroll to the bottom of the page and click Save Changes to persist your application settings.

Adding Auth0 to the Moesif Developer Portal

To connect Auth0 to the Developer Portal, you’ll need to update the environment variables.

Retrieving Values from Auth0

  1. Navigate to the Applications screen in Auth0.
  2. Select the application you created for the Developer Portal.
  3. Go to the Settings tab.
  4. Copy the following values:
    • Domain: Paste this into the REACT_APP_AUTH0_DOMAIN entry in your environment configuration.
    • Client ID: Paste this into the REACT_APP_AUTH0_CLIENT_ID entry in your environment configuration.

Updating Environment Variables

Depending on your setup, these variables can be added to either the my-dev-portal/.env and my-dev-portal-api/.env files (for Node setups) or the distribution/docker-compose.yml file (for Docker setups).

Environment Variables for Node

To configure Stripe in the Developer Portal, you will need to update two .env files located in different parts of your project:

  • my-dev-portal-api/.env file: This is where you configure the backend API environment.
  • my-dev-portal/.env file: This is where you configure the frontend environment.
Backend
  • Open the my-dev-portal-api/.env file.
  • Replace the following lines with the correct values:
AUTH_PROVIDER="Auth0"
AUTH0_DOMAIN="your Auth0 Domain"
  • Save the .env file to ensure the updated values are persisted.
Frontend
  • Open the my-dev-portal/.env file.
  • Replace the following lines with the correct values:
REACT_APP_AUTH0_DOMAIN="yoururl.us.auth0.com"
REACT_APP_AUTH0_CLIENT_ID="your Auth0 Client ID"
  • Save the .env file to ensure the updated values are persisted.

Environment Variables for Docker

  • Open the distribution/docker-compose.yml file.
  • Add or update the following entries in the relevant service configuration under environment:
dev-portal-api:
  environment:
    - AUTH_PROVIDER="Auth0"
    - AUTH0_DOMAIN="your Auth0 Domain"

dev-portal:
  environment:
    - REACT_APP_AUTH0_DOMAIN="yoururl.us.auth0.com"
    - REACT_APP_AUTH0_DOMAIN="your Auth0 Domain"
    - REACT_APP_AUTH0_CLIENT_ID="your Auth0 Client ID"
  • Save the docker-compose.yml file to ensure the updated values are persisted.

With the Auth0 application created and environment variables updated, you’re now ready to proceed to the next step: setting up your payment provider for the Developer Portal.

Next Steps

Once all the values are added, save the file to make sure the updated values are persisted. Next, move on to configuring you billing provider.

Verifying Identity Provider Functionality

After configuring the rest of the developer portal you can verify identity provider functionality in Auth0. On the User Management > Users screen, you should see your newly created user present, tracked by their email.

Updated: